<template>
    <div class="right-panel">
      <el-table
        :data="finishedUsrList"
        style="width: 100%">
        <el-table-column
          prop="rank"
          align="center"
          min-width="40px"
          label="排名">
          <template slot-scope="scope">
            <img v-if="scope.$index === 0" src="~./img/1.png" style="width: 30px;height: auto;"/>
            <img v-else-if="scope.$index === 1" src="~./img/2.png" style="width: 30px;height: auto;"/>
            <img v-else-if="scope.$index === 2" src="~./img/3.png" style="width: 30px;height: auto;"/>
            <span v-else>{{scope.row.rank}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userName"
          align="center"
          min-width="40px"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="score"
          align="center"
          label="得分">
        </el-table-column>
        <el-table-column
          prop="finishedTime"
          align="center"
          min-width="100px"
          label="完成时间">
        </el-table-column>
        <el-table-column
          prop="duration"
          align="center"
          label="时长">
          <template slot-scope="scope">
            <span>{{durationFormate(scope.row.duration)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="likeNum"
          align="center"
          label="获赞">
          <template slot-scope="scope">
            <el-button type="text"
                       title="点赞"
                       style="color: #999"
                       v-if="(scope.row.likeType || 1) == 1"
                       @click="toLike((scope.row.likeType || 1), scope.row.stuId, scope.row.stuMCaseId, scope.$index)"
                       icon="el-icon-thumb"></el-button>
            <el-button type="text"
                       title="点赞"
                       v-else
                       @click="toLike((scope.row.likeType || 1), scope.row.stuId, scope.row.stuMCaseId, scope.$index)"
                       icon="el-icon-thumb"></el-button>
            <span style="margin-left: 5px;">{{scope.row.likeNum}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import { like } from '@/api/student/training/multiple'
export default {
  name: 'rightPanel',
  props: {
    finishedUsrList: Array
  },
  methods: {
    async toLike (likeType, stuId, stuMCaseId, index) {
      await like({
        likeType, stuId, stuMCaseId
      })
      this.$emit('like', index, likeType)
      if (likeType === 1) {
        this.$message({
          message: '点赞成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '取消点赞成功',
          type: 'success'
        })
      }
    }
  },
  computed: {
    durationFormate () {
      return function (data) {
        return data || '0'
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .right-panel{
    width: 728px;
    height: 100%;
    overflow-y: auto;
    background:rgba(255,255,255,1);
    border:1px solid rgba(229,229,229,1);
    border-radius:3px;
    box-sizing: border-box;
    padding: 20px;
  }
</style>
